<template>
  <section v-loading.fullscreen.lock="loading">
    <el-card class="margin-top">
      <div slot="header" class="clearfix relative">
        <el-row>
          <el-col
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            class="flex  align-center justify-start"
          >
            <span class="title-icon margin-right">库存情况</span>
          </el-col>
          <el-col :sm="24" :md="24" :lg="8" :xl="8" class="flex text-blue">
            <div class="margin-lr">
              <span>总产品个数：</span>
              <span>{{ total.num }}</span>
            </div>
            <div class="margin-lr">
              <span>总箱数：</span>
              <span>{{ total.boxNum }}</span>
            </div>
            <div class="margin-lr">
              <span>总重量：</span>
              <span>{{ total.weight }}</span>
            </div>
            <div class="margin-lr">
              <span>总体积：</span>
              <span>{{ total.volume }}</span>
            </div>
          </el-col>
          <el-col
            :sm="24"
            :md="24"
            :lg="4"
            :xl="4"
            class="flex  align-center justify-end"
          >
            <!-- verifyShow.returnInfoEdit -->
            <el-button
              v-if="isEdit"
              type="success"
              size="mini"
              @click="showTimeModal = true"
            >
              仓租计算
            </el-button>
            <el-button
              v-if="isEdit"
              type="primary"
              size="mini"
              @click="importInStockInfo"
            >
              导出库存
            </el-button>
            <i
              :class="{
                'el-icon-arrow-down': show,
                'el-icon-arrow-up': !show
              }"
              class="text-lg pointer margin-left"
              @click="show = !show"
            ></i>
          </el-col>
        </el-row>
      </div>

      <div v-show="show">
        <hot-table ref="hotTable" :settings="hotSettings" :data="inStockInfo" />
      </div>
      <div v-if="inStockInfo.length == 0" class="padding text-center">
        暂无数据
      </div>
    </el-card>
    <el-dialog title="费用日期" :visible.sync="showTimeModal" width="20%">
      <el-form :model="form" ref="timeForm">
        <el-form-item
          label=""
          prop="costTime"
          :rules="[
            {
              required: true,
              message: '日期不能为空',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-date-picker
            size="mini"
            v-model="form.costTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="enterClick">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { HotTable } from "@handsontable/vue";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { ajax } from "@/store/yg/common/utils";
import { checkRowsEmpty } from "@/utils";
import "handsontable/languages/zh-CN";
import globalData from "@/utils/config";

export default {
  name: "InStockInfo",
  components: {
    HotTable
  },
  props: {
    verifyShow: {
      type: Object,
      default: function() {
        return {};
      }
    },
    inStockInfo: {
      type: Array,
      default: function() {
        return [];
      }
    },
    actionUrl: {
      type: String,
      default: ""
    },
    waybillId: {
      type: Number,
      default: 1
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      show: false,
      loading: false,
      autoHeight: "auto",
      uploadDialog: false,
      fbaCodeList: [],
      showTimeModal: false,
      form: {
        costTime: ""
      }
    };
  },
  computed: {
    total() {
      let num = 0,
        boxNum = 0,
        weight = 0,
        volume = 0;
      for (const i of this.inStockInfo) {
        num += Number(i.num);
        boxNum += Number(i.boxNum);
        weight += Number(i.weight);
        let v = 0;
        if (i.boxSpecifications && i.boxSpecifications.indexOf("*") > -1) {
          const list = i.boxSpecifications.split("*");

          if (list.length === 3) {
            const arr = [];
            for (const j of list) {
              let n = j;
              if (isNaN(Number(n))) {
                n = 0;
              }
              arr.push(n);
            }
            v =
              (Number(arr[0]) * 100 * Number(arr[1]) * 100 * Number(arr[2])) /
              10000;
          }
        }
        volume += v;
      }
      volume = volume / 1000000;
      return { num, boxNum, weight, volume };
    },
    hotSettings() {
      return {
        rowHeaders: true, // 行表头
        stretchH: "all", // 所有列宽小于表宽时,填充满整个表 all（所有列填充）/last（最后一列）/none(不填充)
        licenseKey: globalData.licensekey,
        // 定义表结构
        colHeaders: [
          "退货编号",
          "旧FNSKU",
          "新FNSKU",
          "产品个数",
          "卡板数",
          "箱数",
          "箱规（CM）",
          "总重量（KG）",
          "签收日期"
        ],
        width: "100%",
        height: "auto",

        columns: [
          {
            data: "waybillNo",
            width: 100,
            type: "text"
          },
          {
            data: "oldSku", //
            type: "text",
            readOnly: true
          },
          {
            data: "sku",
            readOnly: true,
            type: "text"
          },
          {
            data: "num",
            readOnly: true,
            type: "numeric",
            numericFormat: {
              pattern: "0"
            }
          },
          {
            data: "receiptPallets",
            readOnly: true,
            type: "numeric",
            numericFormat: {
              pattern: "0"
            }
          },
          {
            data: "boxNum",
            readOnly: true,
            type: "numeric",
            numericFormat: {
              pattern: "0"
            }
          },
          {
            data: "boxSpecifications",
            readOnly: true,
            type: "text"
          },
          {
            data: "weight",
            readOnly: true,
            type: "text"
          },
          {
            data: "signTime",
            readOnly: true,
            type: "text"
          }
        ],
        language: "zh-CN"
      };
    }
  },

  mounted() {
    // this.init();
    // console.log("this.shippingfbastockMap :>> ", this.shippingfbastockMap);
  },
  methods: {
    async importInStockInfo() {
      const data = await ajax("exportStockGoods", {
        waybillId: this.waybillId
      });
      if (data.path) {
        this.$message({
          message:
            "已为您打开文件下载页面，如果页面未跳转，请检查弹出窗口是否被浏览器拦截",
          type: "success",
          duration: 5000,
          showClose: true
        });
        window.open(constant.FILE_SERVER + data.path);
      } else {
        this.$message.error("暂无数据");
      }
    },
    cancel() {
      this.showTimeModal = false;
      this.form = {
        costTime: ""
      };
    },
    enterClick() {
      this.$refs.timeForm.validate(valid => {
        if (valid) {
          this.warehouseRentCalculation();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async warehouseRentCalculation() {
      this.loading = true;
      this.form.waybillId = this.waybillId;
      const { code, message } = await ajax("countAbraodStock", this.form);
      if (code === 200) {
        this.$message.success("操作成功！");
      } else {
        this.$message.error(message || "操作失败！");
      }
      this.showTimeModal = false;
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.relative {
  .absolute {
    right: 10px;
    top: -40%;
  }
}
</style>
<style scoped>
/deep/ .el-card__header {
  padding: 8px 20px;
}
</style>
